import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import ContentTitle from "@/components/contentTitle/ContentTitle";
import { Pagination, Table, Button,Modal,message } from "antd";
import { getGoodsList,deleteGoods } from "@/api/goods";
import { baseUrl } from "@/utile/commen.js";

export default function GoodsList() {
  const navigate = useNavigate();
  const columns = [
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
    },
    {
      title: '商品分类',
      dataIndex: 'category',
      key: 'category',
      width: 120,
    },
    {
      title: '商品价格',
      dataIndex: 'price',
      key: 'price',
      width: 100,
    },
    {
      title: '商品图片',
      dataIndex: 'imgUrl',
      key: 'imgUrl',
      width: 100,
      render: (text) => <img src={baseUrl + text} alt="" style={{ width: 50, height: 50 }} />,
    },
    {
      title: '商品描述',
      dataIndex: 'goodsDesc',
      key: 'goodsDesc',
      width: 200,
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 150,
      render: (_, record) => (
        <>
          <Button onClick={()=>goEdit(record)} >编辑</Button>
          <Button type="primary" danger style={{ marginLeft: 10 }} onClick={() => {handelDele(record.id) }}>删除</Button>
        </>
      ),
    },
  ];

  const [data, setData] = useState([{
    key: '1',
    id: '1',
    name: '商品1',
    category: '分类1',
    price: '100',
    imgUrl: '图片1',
    ctime: '2022-01-01',
    rating: '5',
    sellCount: '1000',
    goodsDesc: '描述1',
  }]);

  const [total, setTotal] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(5);

  const change = (page, pageSize) => {
    setCurrentPage(page);
    setPageSize(pageSize);
  };

  const getList = async () => {
    const res = await getGoodsList({ currentPage, pageSize });
    const newDataSource = res.data.map(item => ({ ...item, key: item.id }));
    setData(newDataSource);
    setTotal(res.total);
  };

  useEffect(() => {
    getList();
  }, [currentPage, pageSize]);

  //取消
  const handleCancel = (msg) => {
    message.info(msg);
  }
  
  // 删除商品弹框
  const handelDele = (id) => {
    Modal.confirm({
      title: '删除商品提示',
      content: '确定要删除该商品吗',
      okText: '确定',
      cancelText: '取消',
      onOk: () => handleDelete(id),
      onCancel: () => handleCancel('取消删除')
    });
  }
  const handleDelete = async (id) => {
    const {code,msg} = await deleteGoods({id});
    if(code === 0){
      message.success(msg);
      getList();
    }
    else{
      message.error(msg);
    }
  }

  const goEdit = (row)=>{
    navigate('/home/goodsEdit',{state:row});
  }

  return (
    
    <>
      <ContentTitle title="商品列表" />
      <Table columns={columns} dataSource={data}
        tableLayout='scroll'
        width={50}
        expandable={{
          expandedRowRender: record => (<p style={{ margin: 0 }}>商品id：{record.id} <span style={{ marginLeft: 280 }}>商品名：{record.name}</span></p>)
        }}
        pagination={false}
      />
      <Pagination
        key={`${currentPage}-${pageSize}`}
        total={total}
        showSizeChanger
        showQuickJumper
        defaultCurrent={currentPage}
        defaultPageSize={pageSize}
        showTotal={total => `共 ${total} 条`}
        onChange={change}
        pageSizeOptions={['5', '10', '15', '20']}
        style={{ marginTop: 20 }}
      />
    </>
  );
}